<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>用户管理页</title>
		<!-- 设置360浏览器渲染引擎 -->
		<meta name="renderer" content="webkit">
		<link rel="icon" type="image/png" href="img/favicon.png">
        <link rel="stylesheet" type="text/css" href="amazeui/css/amazeui.css" />
        <!-- 地市下拉列表样式 -->
        <link rel="stylesheet" href="./css/areaStyle.css">
		<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
        <script type="text/javascript" charset="utf-8" src="amazeui/js/amazeui.js"></script>
        <!-- 地市下拉列表插件 -->
        <script src="./js/common/area.js"></script>
        <!-- 地市数据 -->
        <script src="./js/common/charfirstPinyin.js"></script>
		<!-- 全局CSS -->
        <link rel="stylesheet" href="./css/base.css">
		<!-- 当前页面 css -->
        <link rel="stylesheet" type="text/css" href="css/userManage.css"/>
		<!-- 当前页面功能 js -->
		<script src="./js/pages/userManage.js"></script>
	</head>
	<body>
        <!-- nav-start -->
        <header class="am-topbar clear-margin">
            <div class="am-container base-nav-font">
                <div class="am-fl base-nav-title">
                    <em>欢迎光临网博图书网</em>
                    <a href="#">请登录</a>
                    <a href="#">免费注册</a>
                </div>
                <ol class="am-fr base-nav-list">
                    <li>
                        <a href="#">购物车</a>
                    </li>
                    <li>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <div class="base-menu-list">
                            <a>个人账户
                                <span class="am-icon-caret-down"></span>
                            </a>
                            <div class="base-menu-list-content">
                                <ul>
                                    <li>个人信息</li>
                                    <li>收货地址</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ol>
            </div>
        </header>
        <!-- nav-end -->
        <!-- userManage-start -->
        <div class="user-manage-navbar">
            <div class="am-container">
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <ul class="menu-list" id="infoMenu">
                            <li><img src="./img/logo-str.png" alt=""></li>
                            <li name="menu" data-target="userInfo">个人信息</li>
                            <li name="menu" data-target="userOrder">订单管理</li>
                            <li class="seach">
                               <div>
                                   <input type="text">
                                   <button class="btn-seach">查询</button>
                               </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人信息 start -->
        <div id="userInfo">
            <div class="am-container">
                <div class="am-u-sm-2">
                    <ul class="am-list user-left-menu">
                        <li data-target="baseInfo">基本信息修改</li>
                        <li data-target="addressInfo">收货地址管理</li>
                        <li data-target="passwordInfo">密码修改</li>
                    </ul>
                </div>
                <div class="am-u-sm-10 user-right-content">

                    <!-- 基础信息修改 start -->
                    <div class="content-show" id="baseInfo">
                        <div class="title">
                            <span>基本信息修改</span>
                        </div>
                        <div class="am-panel am-panel-default">
                            <div class="am-panel-bd am-g">
                                <div class="am-u-sm-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="phone" class="am-u-sm-4 am-form-label">电话号码:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="phone">
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <label for="email" class="am-u-sm-4 am-form-label">电子邮箱:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="email">
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <div class="am-u-sm-8 am-u-sm-offset-4">
                                            <button type="button" class="am-btn am-btn-default">提交修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <!-- 基础信息修改 end -->

                    <!-- 地址修改 start -->
                    <div class="content-show" id="addressInfo">
                        <div class="title">
                            <span>地址管理</span>
                        </div>
                        <div class="am-panel am-panel-default">
                            <div class="am-panel-bd am-g">
                                <div class="am-u-sm-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="area" class="am-u-sm-4 am-form-label">所在地区:</label>
                                            <div class="am-u-sm-8" style="position: relative;">
                                                <input type="text" name="" id="area">
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <label for="addressDetail" class="am-u-sm-4 am-form-label">详细地址:</label>
                                            <div class="am-u-sm-8">
                                                <textarea class="" rows="3" id="addressDetail"></textarea>
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <label for="username" class="am-u-sm-4 am-form-label">收货人姓名:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="username">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="phone" class="am-u-sm-4 am-form-label">联系电话:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="phone">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="am-u-sm-8 am-u-sm-offset-4">
                                            <button type="button" class="am-btn am-btn-default">新增地址</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                            </div>
                        </div>
                        <div class="address-list">
                            <table class="am-table">
                                <thead>
                                    <tr>
                                        <th>收货人</th>
                                        <th>所在地区</th>
                                        <th>详细地址</th>
                                        <th>联系电话</th>
                                        <th>操作</th>
                                        <th class="setting"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>漩涡鸣人</td>
                                        <td>江苏省南京市秦淮区</td>
                                        <td>龙蟠中路458号通济产业园北区 3栋1-2层</td>
                                        <td>18913000000</td>
                                        <td class="operation">
                                            <span>修改</span>
                                            |
                                            <span>删除</span>
                                            |
                                            <span>设置为默认</span>
                                        </td>
                                        <td class="defaultValue">
                                            <span class="am-badge am-badge-danger am-radius">默认地址</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>漩涡鸣人</td>
                                        <td>江苏省南京市秦淮区</td>
                                        <td>龙蟠中路458号通济产业园北区 3栋1-2层</td>
                                        <td>18913000000</td>
                                        <td class="operation">
                                            <span>修改</span>
                                            |
                                            <span>删除</span>
                                            |
                                            <span>设置为默认</span>
                                        </td>
                                        <td class="defaultValue"></td>
                                    </tr>
                                    <tr>
                                        <td>漩涡鸣人</td>
                                        <td>江苏省南京市秦淮区</td>
                                        <td>龙蟠中路458号通济产业园北区 3栋1-2层</td>
                                        <td>18913000000</td>
                                        <td class="operation">
                                            <span>修改</span>
                                            |
                                            <span>删除</span>
                                            |
                                            <span>设置为默认</span>
                                        </td>
                                        <td class="defaultValue"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <!-- 地址修改 end -->

                    <!-- 密码修改 start -->
                    <div class="content-show" id="passwordInfo">
                        <div class="title">
                            <span>密码修改</span>
                        </div>
                        <div class="am-panel am-panel-default">
                            <div class="am-panel-bd am-g">
                                <div class="am-u-sm-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="phone" class="am-u-sm-4 am-form-label">旧密码:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="phone">
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <label for="email" class="am-u-sm-4 am-form-label">新密码:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="email">
                                            </div>
                                        </div>
                                        
                                        <div class="am-form-group">
                                            <label for="email" class="am-u-sm-4 am-form-label">验证密码:</label>
                                            <div class="am-u-sm-8">
                                                <input type="text" id="email">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="am-u-sm-8 am-u-sm-offset-4">
                                            <button type="button" class="am-btn am-btn-default">提交修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <!-- 密码修改 end -->


                </div>
            </div>
        </div>
        <!-- 个人信息 end -->
        
        <!-- userManage-end -->
    </body>
</html>